<template>
    <div class="c-first-item">
        <c-title>
            {{title}}-初赛阶段
        </c-title>
        <div class="dy-second-none" v-if="video.length < 1">
            暂时没有比赛动态，敬请期待
        </div>
        <div class="dy-first" v-if="video.length > 0">
            <div class="dy-first-left">
                <img :src="video[0].img" alt="">
            </div>
            <div class="dy-first-right">
                <div class="first-right-item" v-for="(item,index) in video" @click="locationHref(item.id)">
                    <div class="item-title">
                        {{item.title}}
                    </div>
                    <div class="item-text">
                        {{item.info.substr(0,60)}}...【详细】
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import cTitle from './c-title.vue';
    export default {
        name:'dynamic',

        props:['title','video'],

        data() {
            return {

            }
        },

        methods: {
            locationHref(id) {
                this.$router.push(`/home/content?type=article_info&id=${id}`)
            }
        },

        mounted() {

        },

        components:{
            cTitle
        },
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    .dy-second-none{
        font-size:18px;
        text-align: center;
        margin-bottom:50px;
        font-weight:bold;
    }
    .dy-first{
        .flex-between;
        margin-bottom:40px;
        &-left {
            width: 40%;
            display: none;
            img {
                width: 100%;
            }
        }
        &-right {
            width: 100%;
            line-height:26px;
            .first-right-item {
                margin-bottom:30px;
                cursor: pointer;
            }
            .item-title {
                text-align: center;
                font-weight:bold;
                font-size:24px;
                margin-bottom:10px;
            }
            .item-text {
                color: #666666;
            }
        }
    }
    .dy-second-content{
        margin:50px 0;
        .flex-between;
        .dy-content-item {
            .box-sizing;
            width: 23%;
            padding: 5px;
            background: #fff;
            font-size:12px;
            > div {
                margin-bottom: 10px;
                span {
                    margin-right: 10px;
                }
            }
            > :nth-child(2), > :nth-child(3) {
                font-weight:bold;
            }
        }
    }
    .c-first{
        width: 50%;
        margin: 50px auto;
    }
    @media screen and (max-width: 768px) {
        .dy-first{
            .flex-between;
            &-left {
                width: 40%;
                display: none;
                img {
                    width: 100%;
                }
            }
            &-right {
                width: 100%;
                line-height:18px;
                .first-right-item {
                    margin-bottom:30px;
                }
                .item-title {
                    font-weight:bold;
                    font-size:3vw;
                    margin-bottom:10px;
                }
                .item-text {
                    color: #666666;
                    font-size: 2vw;
                }
            }
        }
        .dy-second-content{
            margin:50px 0;
            .flex-between;
            .dy-content-item {
                .box-sizing;
                width: 23%;
                padding: 5px;
                background: #fff;
                font-size:12px;
                > div {
                    margin-bottom: 5px;
                    span {
                        margin-right: 3px;
                    }
                }
                > :nth-child(2), > :nth-child(3) {
                    font-weight:bold;
                }
            }
        }
        .c-first{
            width: 90%;
            margin: 50px auto;
        }
    }
</style>